<template>
    <header class="home-header">
        <router-link to="./category" class="category"><i><van-icon name="cluster-o" /></i></router-link>
        <div class="header-search">
            <span class="app-name">我的商城</span>
            <van-search placeholder="山河无恙 人间皆安" />
        </div>
        <router-link to="./login" class="login">登录</router-link> 
    </header>
    <van-swipe class="my-swipe" :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in state.images" :key="image">
            <img :src="image.carouselUrl" />
        </van-swipe-item>
    </van-swipe>
    <div class="category-list">
        <div v-for="(item,index) in state.categoryList" :key="index" @click="tip">
            <img :src="item.imgUrl">
            <span>{{ item.name }}</span>
        </div>
    </div>
    <div class="goods">
        <header class="goods-header">新品上线</header>
        <van-skeleton title :row="3" :loading="false">
            <div class="goods-box">
                <div class="good-item" v-for="(item,index) in state.goodsList" :key="index" @click="goToDetail(item)">
                    <img :src="item.goodsCoverImg" >
                    <div class="good-desc">
                        <div class="title"> {{ item.goodsName }}</div>
                        <div class="price"> {{ item.sellingPrice }}</div>
                    </div>
                </div>
            </div>
        </van-skeleton>
        <Navbar/>
    </div>
</template>

<script setup>
import {reactive} from 'vue'
import img0 from '@/assets/imgs/banneriphone13.png'
import img1 from '@/assets/imgs/bannermate40.png'
import img11 from '@/assets/imgs/chaoshi.png'
import img12 from '@/assets/imgs/fushi.png'
import img13 from '@/assets/imgs/quanqiugou.png'
import img14 from '@/assets/imgs/shengxian.png'
import img15 from '@/assets/imgs/daojia.png'
import img3 from '@/assets/imgs/iphone.png'
import { showToast } from 'vant'
import Navbar from '@/components/Navbar.vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const state = reactive({
    images:[
        {carouselUrl:img0},
        {carouselUrl:img1}
    ],
    categoryList:[
        {
            name:'我的超市',
            imgUrl: img11,
        },
        {
            name:'我的服饰',
            imgUrl: img12,
        },
        {
            name:'全球购',
            imgUrl: img13,
        },
        {
            name:'我的生鲜',
            imgUrl: img14,
        },
        {
            name:'我的到家',
            imgUrl: img15,
        },
        {
            name:'我的超市',
            imgUrl: img11,
        },
        {
            name:'我的服饰',
            imgUrl: img12,
        },
        {
            name:'全球购',
            imgUrl: img13,
        },
        {
            name:'我的生鲜',
            imgUrl: img14,
        },
        {
            name:'我的到家',
            imgUrl: img15,
        },
    ],
    goodsList:[
        {
            goodsId:10925,
            goodsCoverImg: img3,
            goodsName:'华为p50新品，华为年度旗舰折叠...',
            sellingPrice: 10988
        },
        {
            goodsId:10925,
            goodsCoverImg: img3,
            goodsName:'华为p50新品，华为年度旗舰折叠...',
            sellingPrice: 10988
        },
        {
            goodsId:10925,
            goodsCoverImg: img3,
            goodsName:'华为p50新品，华为年度旗舰折叠...',
            sellingPrice: 10988
        }
    ]
})
function tip(){
    showToast('敬请期待')
}
function goToDetail(data) {
    router.push({path:`/product/${data.goodsId}`})
}
</script>

<style lang="less" scoped>
@import '../common/style/mixin.less';
.home-header{
    position: fixed;
    left:0;
    top:0;
    color: @primary;
    .wh(100%,50px);
    .fj();
    line-height: 50px;
    padding:0 15px;
    .boxSizing();
    font-size:15px;
    z-index: 9999;
    .category,.login {
        color: @primary;
    }
    .header-search{
        display: flex;
        width: 70%;
        margin:10px 0;
        padding: 5px 0;
        line-height: 20px;
        .app-name {
            color: @primary;
            font-size: 20px;
            padding: 0 10px;
            border-right: 1px solid #999;
        }
    }
}
.my-swipe{
    img {
        width: 100%;
        height: 100%;
    }
}
.category-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    div {
        display: flex;
        flex-direction: column;
        width:20%;
        text-align: center;
        img {
            .wh(36px,36px);
            margin:13px auto 8px auto;
        }
    }
    
}
.goods {
    .goods-header {
        background:#f9f9f9;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: @primary;
        font-size: 16px;
    }
    .goods-box {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        .good-item {
            width:50%;
            padding:10px;
            box-sizing: border-box;
            border-bottom: 1px solid #eee;
            &:nth-child(2n+1){
                border-right: 1px solid #eee;
            }
            img{
                width: 120px;
                display: block;
                margin: 0 auto;
            }
            .good-desc{
                text-align: center;
                font-size: 14px;
                padding: 10px 0;
                .price {
                    color: @primary;
                }
            }
        }
    }
}
</style>